<template>
  <h1>Component Demo!</h1>
  <ServiceList :column_count="4" :service_list="services_list">
  </ServiceList>
</template>

<script lang="ts">

import { ref } from "vue";
import { ServiceList } from '@/components/ServiceCard';

const services_list = ref([
  {
    name: "service name1",
    description: 'Do the dishes'
  },
  {
    name: "service name2",
    description: 'Take out the trash'
  },
  {
    name: "service name3",
    description: 'Take out the trash'
  },
  {
    name: "service name4",
    description: 'Take out the trash'
  },
  {
    name: "service name5",
    description: 'Take out the trash'
  }
])

export default {
  name: 'Home',
  components: {
    ServiceList,
  },
  setup() {
    return {
        services_list
    };
  },
};
</script>

<style scoped>
.home-box-card {
  margin: auto auto;
  width: 200px;
}
</style>